<!doctype html><html lang="en"><head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!-- Bootstrap CSS -->    <!-- <link rel="stylesheet" href="bootstrap4/dist/css/bootstrap.css">    <link rel="stylesheet" href="ycss/header.css">    <link rel="stylesheet" href="ycss/banner.css">    <link rel="stylesheet" href="ycss/center.css">    <link rel="stylesheet" href="ycss/bottom.css">    <link rel="stylesheet" href="ycss/login.css">    <link rel="stylesheet" href="ycss/shopping.css"> -->    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>    <title>bootstrap 4</title>    <style>        body{            min-width: 580px;            height: 1000px;        }    </style><script defer src="js/shopping.js"></script><link href="css/shopping.css" rel="stylesheet"></head><body><!--导航条--><div class="head" style="display: flex">    <nav class=" navbar navbar-expand-lg navbar-light container" style="padding: 0 15px">        <a class="navbar-brand" href="#">            <img src="" width="100px"/>        </a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">            <span class="navbar-toggler-icon" ></span>        </button>        <div class="collapse navbar-collapse" id="navbarNavDropdown">            <ul class="hd navbar-nav col-lg-9" id="hd">                <li class="nav-item ">                    <a class="nav-link" href="index.html" >首页</a>                </li>                <li class=" nav-item">                    <a class="nav-link" href="#">关于我们</a>                </li>                <li class=" nav-item">                    <a class="nav-link" href="#" >畅销榜单</a>                </li>                <li class=" nav-item dropdown">                    <a class="nav-link" href="#">全部商品</a>                </li>                <li class=" nav-item">                    <a class="nav-link" href="#">新闻资讯</a>                </li>            </ul>            <ul  class="d-flex flex-row form-inline my-3 my-lg-0 navbar-nav" id="nav-right">                <li class=" nav-item">                    <a href="login.html" style="text-decoration: none;color: black"><img  src="" alt="" width="25px">                        <span id="dr"  class="dr">登录</span><span id="cle" style=" vertical-align: middle;"></span></a>                </li>                <li class=" nav-item">                    <a href=""><img id="gdj" src="" alt="" width="22px"></a>                </li>                <li class=" nav-item">                    <a id="gwc" href="shopping.html"><img src="" alt="" width="22px"></a>                </li>            </ul>        </div>    </nav></div><!--主体内容--><div class="dr_banner"  >    <img src="" alt="" width="100%">    <div style="position: relative" id="sh" class="container col-12 ">        <table id="table" border="1" cellspacing="0" width="100%">            <thead>            <tr>                <th>商品</th>                <th>单价</th>                <th>数量</th>                <th>小计</th>                <th>操作</th>            </tr>            </thead>            <tbody id="box">            </tbody>        </table>        <div style="position: absolute;right: 120px;bottom: 130px;width: 100px">            <input style="outline: none" id="se"   type="text" placeholder="搜索"></div>        <div  class="js">           <button id="sh_js" class=" btn btn-danger" type="button">结算：</button>            <span id="lj" class="lj" style="position: absolute;right: 95px">¥0.00</span>        </div>    </div></div><!--尾部--><div  id="bottom" >    <div class="container">        <!--     上层盒子-->        <div class="bottom-top">            <!--         左边-->            <div class="row col-12">                <div class="bottom-top-left col-sm-12 col-lg-5 ">                    <div class="col-sm-8">                        <button  type="button" class="btn btn-outline-light">在线商城 &nbsp;&nbsp;></button>                        <p>联系方式</p>                        <p>159-5686-8888</p>                    </div>                    <div >                        <img class="col-4" src="" alt="" width="70%" style="max-width: 150px">                    </div>                </div>                <!--         右边-->                <div class="bottom-top-right col-sm-12   col-lg-7 ">                    <ul >                        <h5><a href="">个人护理</a></h5>                        <li><a href="">脸部护理</a></li>                        <li><a href="">头发护理</a></li>                        <li><a href="">全身护理</a></li>                        <li><a href="">滋养美白</a></li>                    </ul>                    <ul >                        <h5><a href="">健康美肌</a></h5>                        <li><a href="">营养品</a></li>                        <li><a href="">保健品</a></li>                        <li><a href="">美容仪</a></li>                        <li><a href="">胶原蛋白</a></li>                    </ul>                    <ul >                        <h5><a href="">化妆工具</a></h5>                        <li><a href="">化妆海绵</a></li>                        <li><a href="">彩妆套刷</a></li>                        <li><a href="">睫毛夹</a></li>                        <li><a href="">其他工具</a></li>                    </ul>                    <ul >                        <h5><a href="">香水</a></h5>                        <li><a href="">男士香水</a></li>                        <li><a href="">女士香水</a></li>                        <li><a href="">惠选套装</a></li>                    </ul>                </div>            </div>        </div>        <!--     下层盒子-->        <div style="text-align: center ;margin: 20px 0">            <div style="color: #adadad;">我的网站 版权所有 2008-2014 湘ICP备8888888</div>            <div style="color: #adadad;">爱米有限公司                地址：南昌市上海路555号 电话：021-23888666</div>            <div style="color: #adadad;">联系我们 : 400-820-5118, 800-820-5118  联系时间 : 周一至周日 09:00-21:00 (节假日休息)</div>            <div style="color: #adadad;">国家药监局提示您：请正确认识化妆品功效， 化妆品不能替代药品，不能治疗皮肤病等疾病。</div>        </div>    </div></div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><!-- <script src="bootstrap4/dist/js/jquery.slim.min.js"></script> --><!--  可以用来实现  弹出框  下拉菜单  提示框功能  如果说不需要这些功能  可以直接引入bootstrap.min.js  很小 只有62k--><!--<script src="bootstrap4/dist/js/popper.min.js" ></script><script src="bootstrap4/dist/js/bootstrap.min.js"></script>--><!--如果 想要 popper的功能  可以直接引入 bundle.js 包含所有的功能--><!-- <script src="bootstrap4/dist/js/bootstrap.bundle.min.js"></script> --><script src="js/template-web.js"></script><!-- <script src="jq/jquery.min.js"></script> --><!-- <script src="js/shopping.js"></script> --><script type="text/html" id="tem1">    <!--1、定义好 模板-->    {{each  list}}    <tr id='{{$index}}'>    <td id="gg"><img src="{{$value.src}}" title={{$value.title}} alt=""><p>{{$value.name}}</p></td>    <td class="dj">{{$value.pwd}}</td>    <td style="vertical-align: center">        <button style="height: 30px;line-height: 0" type="button" class="btn btn-light">-</button>        <span style="padding: 0 10px;box-sizing: border-box" class="shul">{{$value.sl}}</span>        <button style="height: 30px;line-height: 0" type="button" class="btn btn-light">+</button>    </td>    <td class="jg" style="width: 145px;">{{$value.pwd}}</td>    <td >        <span id="sc"  style="cursor: pointer">删除</span>    </td>    </tr>    {{/each}}</script><script>    // var ob=[    //     {src:"img/11.jpg", name:'保湿精华小棕瓶', sl:"0", pic:"￥559.00",title:"1", },    //     {src:"img/12.jpg", name:'蜂蜜面膜', sl:"0", pic:"￥159.00", title:"2",},    //     {src:"img/13.jpg", name:'花漾补水', sl:"0", pic:"￥259.00", title:"3", },    //     {src:"img/14.jpg", name:'洗面奶', sl:"0", pic:"￥79.00", title:"4", },    // ]    // var box=document.getElementById("box")    // window.onload=function () {    //     //判断是否登录更改导航栏登入的文字    //     sessionStorage['tet']==undefined?sessionStorage['tet']="":[];    //     var dr = document.getElementById("dr");    //     var cle = document.getElementById("cle");    //     if (localStorage['tet'] != null) {    //         dr.innerHTML = localStorage['tet']    //         cle.innerHTML = "退出"    //     }    //     cle.onclick = function () {    //         localStorage.removeItem('tet')    //         dr.innerHTML = "登录";    //         cle.innerHTML = "";    //     }    //     var arr=localStorage[`${dr.innerHTML}`]    //     console.log(arr);    //     arr=JSON.parse(arr);    //     console.log(arr.length);    //     var sp1=[];    //     var newArr=[]    //     console.log(newArr);    //     //存入商品    //     for (i=0;i<9;i++){    //         if (arr[i]!=undefined){    //             sp1.push(arr[i]);    //         }    //     }    //     var obj={    //         list:sp1,    //     }    //     console.log(obj);    //     var html=template("tem1",obj);    //     box.innerHTML=html;    //         //放大镜    //         var se = document.getElementById("se")    //         se.oninput = function () {    //             var ni = localStorage['tet'];    //             var key = localStorage.getItem(ni);    //             key = JSON.parse(key);    //             var newArr = [];    //             for (var i = 0; i < key.length; i++) {    //                 if (key[i].name.indexOf(this.value) != -1) {    //                     newArr.push(key[i]);    //                 }    //             }    //             var Obj = {    //                 list: newArr,    //             }    //             var html = template("tem1", Obj);    //             box.innerHTML = html;    //         }    //     //   1.找到table元素    //     var table=document.getElementById("table");    //     // 2.找到table下的所有的button  用变量btns接收    //     var btns=table.querySelectorAll("button");    //     console.log(btns);    //     //给每个span添加数量    //     var sl=document.getElementsByClassName('sl');    //     console.log(sl);    //     var Arr=[];    //     for (i=0;i<arr.length;i++){    //         if (newArr[i]!=undefined){    //             Arr.push(newArr[i])    //         }    //     }    //     for (var i=0;i<sl.length;i++){    //         sl[i].innerHTML=Arr[i]    //     }    //     //3.遍历每个按钮button  绑定单击事件    //     for (var i=0;i<btns.length;i++) {    //         btns[i].onclick=function () {    //             console.log(this);    //             var span=this.parentNode.children[1];    //             console.log(span);    //             var txt=span.innerHTML;    //             if(this.innerHTML.trim()=="+"){    //                 txt++;    //             }else if(txt>0){    //                 txt--    //             }    //             //每次操作完之后把txt拼回span中    //             span.innerHTML=txt;    //             //处理小计    //             //1.找到单价price  :当前点击的按钮的父元素的上一个兄弟    //             var price =this.parentNode.previousElementSibling.innerHTML.slice(1);    //             console.log(price);    //             //2.数量上面已经获取了 txt 计算小计    //             var sum  ="¥"+(price*txt)+".00";    //             //小计拼接回当前按钮的父元素的下一个兄弟    //             this.parentNode.nextElementSibling.innerHTML=sum;    //             //处理总计    //             //声明变量 total 用于保存 总价    //             var total=0;    //             //获取除了最后一行tr中的，每个tr中的倒数第二个td 保存在tds中    //             var tds=table.querySelectorAll("table tr td:nth-last-child(2)");    //             console.log(tds);    //             // 遍历每个tds中的小计 并累加到total中    //             for (var i=0;i<tds.length;i++){    //                 total+=Number(tds[i].innerHTML.slice(1));    //             }    //             //找到最后一行tr的最后一列的td 并将total赋值给它    //             var lj=document.getElementById("lj")    //             lj.innerHTML="¥"+total+".00";    //             console.log( lj.innerHTML);    //         }    //     }    //     //查重    //     for (var i=0;i<arr.length;i++){    //         console.log(arr.length);    //         for(var j=0;j<arr.length-i;j++){    //             if(arr[j]==arr[j+1]){  //两个值相等时    //                 arr.splice(j)    //             }    //         }    //         console.log( arr.splice(j));    //     }    //     //页面加载时根据购物车货物的数量和单价生成总价    //     var jg=document.getElementsByClassName("jg");    //     var dj=document.getElementsByClassName("dj");    //     var shul=document.getElementsByClassName('shul');    //     var lj=document.getElementsByClassName('lj');    //     var total=0;    //     console.log(shul);//1    //     console.log(jg);    //     console.log(lj);    //     console.log(dj);    //     for (i=0;i<jg.length;i++){    //         console.log(jg[i].innerHTML.slice(1));    //         lj[0].innerHTML="￥"+dj[i].innerHTML.slice(1)*shul[i].innerHTML;    //         total+=dj[i].innerHTML.slice(1)*shul[i].innerHTML;    //     }    //     lj.innerHTML="￥"+total+".00";    //     console.log(lj.innerHTML);    //         //删除    //     var sc=document.getElementById("sc");    //     console.log(sc);    //     sc.onclick= function () {    //             console.log(12345);    //             var add=this.parentElement.parentElement.attributes[0];    //         console.log(add);    //         for (var i=0;i<arr.length; i++) {    //                 var lj=document.getElementById("lj")    //                 arr.splice(box,sc);    //                 var str=JSON.stringify(arr);    //                 localStorage.setItem(arr, str);    //                 this.parentElement.parentElement.remove();    //                 lj.innerHTML="￥"+"0.00";    //             }    //         }    //         //判断是否登入了，没有登入无法直接进入购物车    //         var gwc = document.getElementById("gwc");    //         console.log(gwc);    //         gwc.onclick = function (e) {    //             e.preventDefault()    //             if (localStorage['tet'] != null) {    //                 window.location.assign("shopping.html");    //             } else {    //                 window.location.assign("login.html");    //             }    //         }    //         //结算    //         var js=document.getElementById("sh_js")    //         js.onclick=function () {    //             console.log(777999);    //             alert("结算成功，你的商品会24小时内发货，请耐心等待")    //                 newArr.splice(gg,1);    //                 var str=JSON.stringify(newArr);    //                 localStorage.setItem(txt,str);    //                 this.parentNode.parentNode.remove();    //                 lj.innerHTML="¥"+"0.00";    //         }    // }</script></body></html>